<template>
  <li class="table-bar-item" @click="goItem" :style="{color:getActiveColor}">
    <slot name="icon"></slot>
    <slot name="title"></slot>
  </li>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
    };
  },
  // 父子组件传值：
  // 1.父传子：props属性
  // 2.子传父：自定义事件，子组件使用$emit触发事件，父组件监听事件
  props: {
    path: String,
    activecolor:{
        type:String,
        default:"red"
    }
  },
  computed: {
    getActive() {
      // 如果当前页面传过来的路由和当前激活的路由一致，就使用active类名
      return this.path === this.$route.path;
    },
    getActiveColor(){
        if(this.getActive){
            return this.activecolor
        }
    }
  },
  methods: {
    goItem() {
      this.$router.push(this.path);
    },
  },
};
</script>

<style>
.active {
  color: red;
}
</style>
